<template>
  <div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-dropdown>
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="handleAddLayout"><a-icon type="plus" />{{$t('m.eform.appview.other.handleAddLayout')}}</a-menu-item>
          <a-menu-item key="2" @click="handleAddDragLayout"><a-icon type="plus" />{{$t('m.eform.appview.other.handleAddDragLayout')}}</a-menu-item>
        </a-menu>
        <a-button type="primary" icon="plus">{{$t('m.eform.appview.other.handleAddLayout')}}<a-icon type="down" /></a-button>
      </a-dropdown>
      <!-- <a-dropdown>
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="handleAddTable"><a-icon type="plus" />{{$t('m.eform.appview.other.handleAddTable')}}</a-menu-item>
          <a-menu-item key="2" @click="handleAddEditableTable"><a-icon type="plus" />{{$t('m.eform.appview.other.handleAddEditableTable')}}</a-menu-item>
        </a-menu>
        <a-button type="primary" icon="plus">{{$t('m.eform.appview.other.handleAddTableBut')}}<a-icon type="down" /></a-button>
      </a-dropdown>-->
      <a-button type="primary" icon="plus" @click="handleAddEditableTable">{{$t('m.eform.appview.other.handleAddTableBut')}}</a-button>
      <a-button @click="handleAddTree" type="primary" icon="plus">{{$t('m.eform.appview.other.handleAddTree')}}</a-button>
      <a-button @click="handleAddMobile" type="primary" icon="plus">{{$t('m.eform.appview.other.handleAddMobile')}}</a-button>
      <a-button @click="batchDel" type="default" icon="delete">{{ $t('m.common.button.delete') }}</a-button>

      <div style="float: right">
        <a-input-search style="width: 200px;" :placeholder="$t('m.common.label.guan-jian-zi')" enter-button @search="onSearch"></a-input-search>
      </div>
    </div>

    <!-- table区域-begin -->
    <a-table
      ref="table"
      size="middle"
      bordered
      rowKey="id"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="ipagination"
      :loading="loading"
      :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
      @change="handleTableChange">
      <template slot="serialNum" slot-scope="text,record,index">
        {{(ipagination.current-1) * ipagination.pageSize + parseInt(index) + 1}}
      </template>
      <template slot="action" slot-scope="text, record">
        <a @click="handleEdit(record)">{{ $t('m.common.button.update') }}</a>
        <a-divider type="vertical"/>
        <a-dropdown>
          <a class="ant-dropdown-link">{{$t('m.common.button.more')}}
            <ych-icon type="down"/>
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a @click="handleTest(record)">{{ $t('m.common.button.test') }}</a>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleGetUrl(record)">{{$t('m.eform.appview.other.pageUrl')}}</a>
            </a-menu-item>
            <a-menu-item v-if="record.viewStatus == '0'">
              <a-popconfirm :title="$t('m.common.tip.enable_confirm')" @confirm="() => handleActivate(record)">
                <a>{{ $t('m.common.button.enable') }}</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item v-if="record.viewStatus == '1'">
              <a-popconfirm :title="$t('m.common.tip.disable_confirm')" @confirm="() => handleSuspend(record)">
                <a>{{ $t('m.common.button.disable') }}</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item>
              <a-popconfirm :title="$t('m.common.tip.delete_confirm')" @confirm="() => handleDelete(record.id)">
                <a>{{ $t('m.common.button.delete') }}</a>
              </a-popconfirm>
            </a-menu-item>
            <a-menu-item>
              <a @click="handleCopy(record)">{{$t('m.common.button.copy')}}</a>
            </a-menu-item>
            <a-menu-item v-if="record.viewType === 'table'">
              <a-popconfirm :title="$t('m.eform.appview.other.changeToEditableTable_confirm')" @confirm="() => changeToEditableTable(record)">
                <a>{{$t('m.eform.appview.other.changeToEditableTable')}}</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </template>

    </a-table>

    <act-app-view-layout-modal ref="actAppViewLayout" @ok="modalFormOk" :groupId="groupId"/>

    <act-app-view-drag-layout-modal ref="actAppViewDragLayout" @ok="modalFormOk" :groupId="groupId"/>

    <actAppView-modal ref="actAppView" @ok="modalFormOk" :groupId="groupId"/>

    <actAppView-editable-modal ref="actAppViewEditable" @ok="modalFormOk" :groupId="groupId"/>

    <ActAppTreeModal ref="actAppTree" @ok="modalFormOk" :groupId="groupId"/>

    <act-app-mobile-view-modal ref="actAppMobileView" @ok="modalFormOk" :groupId="groupId"/>

    <ViewLayoutRedirectModal ref="viewLayoutRedirectModal"/>
  </div>
</template>

<script>

  import { YcListMixin } from '@/mixins/YcListMixin'
  import { filterMultiDictText } from '@/components/dict/YchDictSelectUtil'
  import { getViewUrl } from '@/utils/hbdUtil'
  import { putAction } from '@/api/manage'
  import ActAppViewLayoutModal from './modules/ActAppViewLayoutModal'
  import ActAppViewDragLayoutModal from './modules/ActAppViewDragLayoutModal'
  import ViewLayoutRedirectModal from './redirect/ViewLayoutRedirectModal'
  import { EFormConstant } from './EFormConstant'
  import ActAppViewModal from './modules/ActAppViewModal'
  import ActAppViewEditableModal from './modules/ActAppViewEditableModal'
  import ActAppMobileViewModal from './modules/ActAppMobileViewModal'
  import ActAppTreeModal from './modules/ActAppTreeModal'
  import YchConstant from "@/api/YchConstant";

  export default {
    name: 'ActAppViewList',
    mixins: [YcListMixin],
    components: {
      ActAppViewModal,
      ActAppViewLayoutModal,
      ActAppViewDragLayoutModal,
      ViewLayoutRedirectModal,
      ActAppMobileViewModal,
      ActAppTreeModal,
      ActAppViewEditableModal,
    },
    props: {
      groupId: {
        type: String,
        required: true
      },
    },
    data () {
      return {
        queryParam: {
          groupId: this.groupId
        },
        isorter: {
          column: 'orderNum',
          order: 'asc',
        },
        columns: [
          {
            title:this.$t('m.common.label.number'),
            dataIndex: '',
            key: 'rowIndex',
            width: 50,
            align: 'center',
            scopedSlots: { customRender: 'serialNum' },
          },
          {
            title: this.$t('m.eform.appview.entity.viewName'),
            align: 'center',
            dataIndex: 'viewName'
          },
          {
            title: this.$t('m.eform.appview.entity.viewCode'),
            align: 'center',
            dataIndex: 'viewCode'
          },
          {
            title: this.$t('m.eform.appview.entity.viewType'),
            align: 'center',
            dataIndex: 'viewType',
            customRender: (text) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(EFormConstant.viewTypeAll, text + '')
              }
            }
          },
          {
            title: this.$t('m.eform.appview.entity.viewStatus'),
            align: 'center',
            dataIndex: 'viewStatus',
            width: 100,
            customRender: (text) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(EFormConstant.status, text + '')
              }
            }
          },
          {
            title: this.$t('m.common.label.sort'),
            align: 'center',
            dataIndex: 'orderNum',
            width: 80,
          },
          {
            title: this.$t('m.common.label.operate'),
            dataIndex: 'action',
            align: 'center',
            width: 220,
            scopedSlots: { customRender: 'action' },
          }
        ],
        url: {
          list: YchConstant.PREFIX_EFORM + '/manage/actAppView/list',
          delete: YchConstant.PREFIX_EFORM + '/manage/actAppView/delete',
          deleteBatch: YchConstant.PREFIX_EFORM + '/manage/actAppView/deleteBatch',
          active: YchConstant.PREFIX_EFORM + '/manage/actAppView/active',
          suspended: YchConstant.PREFIX_EFORM + '/manage/actAppView/suspended',
          changeToEditableTable: YchConstant.PREFIX_EFORM + '/manage/actAppView/changeToEditableTable',
        }
      }
    },
    methods: {
      handleAddLayout () {
        this.$refs.actAppViewLayout.add()
        this.$refs.actAppViewLayout.title = this.$t('m.common.button.add')
        this.$refs.actAppViewLayout.disableSubmit = false
      },
      handleAddDragLayout () {
        this.$refs.actAppViewDragLayout.add()
        this.$refs.actAppViewDragLayout.title = this.$t('m.common.button.add')
        this.$refs.actAppViewDragLayout.disableSubmit = false
      },
      handleAddTable () {
        this.$refs.actAppView.add()
        this.$refs.actAppView.title = this.$t('m.common.button.add')
        this.$refs.actAppView.disableSubmit = false
      },
      handleAddEditableTable () {
        this.$refs.actAppViewEditable.add()
        this.$refs.actAppViewEditable.title = this.$t('m.common.button.add')
        this.$refs.actAppViewEditable.disableSubmit = false
      },
      handleAddTree () {
        this.$refs.actAppTree.add()
        this.$refs.actAppTree.title = this.$t('m.common.button.add')
        this.$refs.actAppTree.disableSubmit = false
      },
      handleAddMobile () {
        this.$refs.actAppMobileView.add()
        this.$refs.actAppMobileView.title = this.$t('m.common.button.add')
        this.$refs.actAppMobileView.disableSubmit = false
      },
      handleEdit (record) {
        if (record.viewType == 'layout') {
          this.handleEditLayout(record)
        } else if (record.viewType == 'dragLayout') {
          this.handleEditDragLayout(record)
        } else if (record.viewType == 'table') {
          this.handleEditTable(record)
        } else if (record.viewType == 'editableTable') {
          this.handleEditEditableTable(record)
        } else if (record.viewType == 'tree') {
          this.handleEditTree(record)
        } else if (record.viewType == 'mobile') {
          this.handleEditMobile(record)
        }
      },
      handleEditLayout (record) {
        this.$refs.actAppViewLayout.edit(record)
        this.$refs.actAppViewLayout.title = this.$t('m.common.button.update')
        this.$refs.actAppViewLayout.disableSubmit = false
      },
      handleEditDragLayout (record) {
        this.$refs.actAppViewDragLayout.edit(record)
        this.$refs.actAppViewDragLayout.title = this.$t('m.common.button.update')
        this.$refs.actAppViewDragLayout.disableSubmit = false
      },
      handleEditTable (record) {
        this.$refs.actAppView.edit(record)
        this.$refs.actAppView.title = this.$t('m.common.button.update')
        this.$refs.actAppView.disableSubmit = false
      },
      handleEditEditableTable (record) {
        this.$refs.actAppViewEditable.edit(record)
        this.$refs.actAppViewEditable.title = this.$t('m.common.button.update')
        this.$refs.actAppViewEditable.disableSubmit = false
      },
      handleEditTree (record) {
        this.$refs.actAppTree.edit(record)
        this.$refs.actAppTree.title = this.$t('m.common.button.update')
        this.$refs.actAppTree.disableSubmit = false
      },
      handleEditMobile (record) {
        this.$refs.actAppMobileView.edit(record)
        this.$refs.actAppMobileView.title = this.$t('m.common.button.update')
        this.$refs.actAppMobileView.disableSubmit = false
      },
      handleTest (record) {
        this.$refs.viewLayoutRedirectModal.viewCode = record.viewCode
        this.$refs.viewLayoutRedirectModal.visible = true
      },
      handleGetUrl (record) {
        const url = getViewUrl(record.viewCode)
        this.$info({
          title: this.$t('m.eform.appreport.entity.widgetUrl'),
          content: url
        })
      },
      handleCopy (record) {
        if (record.viewType == 'layout') {
          this.handleCopyLayout(record)
        } else if (record.viewType == 'dragLayout') {
          this.handleCopyDragLayout(record)
        } else if (record.viewType == 'table') {
          this.handleCopyTable(record)
        } else if (record.viewType == 'editableTable') {
          this.handleCopyEditableTable(record)
        } else if (record.viewType == 'tree') {
          this.handleCopyTree(record)
        } else if (record.viewType == 'mobile') {
          this.handleCopyMobile(record)
        }
      },
      handleCopyLayout (record) {
        this.$refs.actAppViewLayout.copy(record)
        this.$refs.actAppViewLayout.title = this.$t('m.common.button.copy')
        this.$refs.actAppViewLayout.disableSubmit = false
      },
      handleCopyDragLayout (record) {
        this.$refs.actAppViewDragLayout.copy(record)
        this.$refs.actAppViewDragLayout.title = this.$t('m.common.button.copy')
        this.$refs.actAppViewDragLayout.disableSubmit = false
      },
      handleCopyTable (record) {
        this.$refs.actAppView.copy(record)
        this.$refs.actAppView.title = this.$t('m.common.button.copy')
        this.$refs.actAppView.disableSubmit = false
      },
      handleCopyEditableTable (record) {
        this.$refs.actAppViewEditable.copy(record)
        this.$refs.actAppViewEditable.title = this.$t('m.common.button.copy')
        this.$refs.actAppViewEditable.disableSubmit = false
      },
      handleCopyTree (record) {
        this.$refs.actAppTree.copy(record)
        this.$refs.actAppTree.title = this.$t('m.common.button.copy')
        this.$refs.actAppTree.disableSubmit = false
      },
      handleCopyMobile (record) {
        this.$refs.actAppMobileView.copy(record)
        this.$refs.actAppMobileView.title = this.$t('m.common.button.copy')
        this.$refs.actAppMobileView.disableSubmit = false
      },
      handleActivate (record) {
        putAction(this.url.active + '?id=' + record.id, {}).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
            this.loadData()
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
        })
      },
      handleSuspend (record) {
        putAction(this.url.suspended + '?id=' + record.id, {}).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
            this.loadData()
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
        })
      },
      changeToEditableTable (record) {
        putAction(this.url.changeToEditableTable + '?id=' + record.id, {}).then((res) => {
          if (res.success) {
            this.messageUtil.success(res.message)
            this.loadData()
          } else {
            this.messageUtil.warning(res.message)
          }
        }).finally(() => {
        })
      },
    }
  }
</script>
<style lang="less" scoped>
</style>
